<!--
 * @Author: lmk
 * @Date: 2021-09-29 09:48:57
 * @LastEditTime: 2021-12-14 18:48:39
 * @LastEditors: lmk
 * @Description: 
-->
<template>
  <view
    class="u-padding-left-32 u-padding-right-32 u-padding-top-58"
    :class="currentTheme"
  >
    <a-nabbar :name="`添加${name}账号`" />
    <view class="pay text-white">
      <item-box :padding="0">
        <view class="u-padding-left-40 u-padding-right-40">
          <label-box
            label="姓名"
            labelWidth="130"
            labelSize="32"
            paddingTb="20"
          >
            <u-input
              v-model="form.realName"
              :clearable="false"
              border
              :borderColor="currentThemeObj.inputBorderColor"
              placeholder="请输入真实姓名"
              :placeholder-style="`color:${currentThemeObj.placeholderColor}`"
					    maxlength="6"
            ></u-input>
          </label-box>
        </view>
        <view class="u-padding-left-40 u-padding-right-40">
          <label-box
            label="账号"
            labelWidth="130"
            labelSize="32"
            paddingTb="20"
          >
            <view v-if="name == '微信'" class="u-inline-flex">
              <view v-if="openid" class="u-font-24 text-order-666 u-margin-right-10">授权成功</view>
              <item-btn @click="bindAcount" :height="64" :bgColor="currentThemeObj.primary" width="152rpx">
                <text class="u-font-24">点击授权</text>
              </item-btn>
            </view>
            <view v-else>
              <u-input
                v-model="form.loginId"
                :clearable="false"
                border
                :borderColor="currentThemeObj.inputBorderColor"
                :placeholder="`请输入${name}账号`"
                :placeholder-style="`color:${currentThemeObj.placeholderColor}`"
              ></u-input>
            </view>
          </label-box>
        </view>
      </item-box>
    </view>
    <fixed-team btnText="确定" @btnClick="submitPay"></fixed-team>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { add } from "../../api/crud";
import { getOpenid } from "@/api/wallet";
export default {
  name: "payMoney",
  data() {
    return {
      name: "",
      form: {},
      apiModule: "shopApi",
      type: "",
      apiType: "userAccountSetting",
      openid: "",
    };
  },
  computed: {
    ...mapGetters(["loginForm"]),
    payType() {
      if (this.type == 1) return "zhifubao";
      if (this.type == 2) return "weixin";
    },
  },
  onLoad: function (option) {
    this.name = option.name;
    this.type = option.type;
  },
  methods: {
    // 添加账户
    submitPay() {
      if (!this.form.realName) {
        this.$u.toast("请输入真实姓名");
        return false;
      }

      let tips = "请输入账号"
      if (this.type == 2) {
        this.form.loginId = this.openid;
        tips="请授权获取账号";
      }

      if (!this.form.loginId) {
        this.$u.toast(tips);
        return false;
      }

      let form = { 
        ...this.form, 
        type: this.payType, 
        uid: this.loginForm.uid,
        tradeType:'JSAPI',
        platformType:'manage',
        openid:this.openid
      };
      add(form, this.apiType, this.apiModule, "").then((res) => {
        this.routeBack("添加成功");
      });
    },
    //微信授权，获取openid
    bindAcount() {
      let _this = this;
      wx.login({
        success(res) {
          if (res.code) {
            //发起网络请求
            getOpenid({
              platformType: "manage",
              tradeType: "JSAPI",
              code: res.code,
            }).then((data) => {
              _this.openid = data;
            });
          } else {
            console.log("登录失败！" + res.errMsg);
          }
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
</style>